$(document).ready(function () { // 确保文档在完全加载后再执行内部代码
    const logoutButton = $('.logout'); // 获取注销按钮
    const token = localStorage.getItem('token'); // 从 localStorage 获取 token
    const id = localStorage.getItem('user_id'); // 从 localStorage 获取用户 ID
    console.log(token); // 打印 token 到控制台
    console.log(id); // 打印用户 ID 到控制台

    if (token && id) { // 如果 token 和 id 都存在
        // 获取用户信息并填充表单
        axios.get(`http://localhost:9000/users/info?id=${id}`, { // 发送 GET 请求获取用户信息
            headers: { 'Authorization': token } // 设置请求头中的授权信息
        }).then(response => {
            if (response.data.code === 1) { // 如果获取用户信息成功
                const user = response.data.user; // 获取用户信息
                $('.off').hide(); // 隐藏 .off 元素
                $('.on').show(); // 显示 .on 元素
                $('.nickname').text(user.nickname); // 显示用户昵称
            } else { // 如果获取用户信息失败
                alert('获取用户信息失败：' + response.data.message); // 弹出错误信息
                window.location.href = 'login.html'; // 跳转到登录页面
            }
        }).catch(error => { // 捕获请求错误
            console.error('获取用户信息出错：', error); // 在控制台打印错误信息
            alert('获取用户信息出错，请稍后重试'); // 弹出错误提示
        });
    } 

    // 加载轮播图
    loadCarousel(); // 调用加载轮播图函数

    // 注销登录按钮点击事件
    logoutButton.on('click', function () { // 为注销按钮添加点击事件监听器
        layui.use('layer', function () { // 使用 layui 的 layer 模块
            var layer = layui.layer;

            layer.confirm('确定要注销登录？', { // 显示确认对话框
                btn: ['确定', '取消'] // 按钮文本
            }, function () { // 确定按钮的回调函数
                localStorage.removeItem('token'); // 删除 localStorage 中的 token
                localStorage.removeItem('nickname'); // 删除 localStorage 中的昵称
                $('.off').show(); // 显示 .off 元素
                $('.on').hide(); // 隐藏 .on 元素
                layer.msg('注销登录成功'); // 显示注销成功消息
            }, function () { // 取消按钮的回调函数
                layer.msg('已取消'); // 显示取消消息
            });
        });
    });

    // 加载轮播图函数
    function loadCarousel() {
        axios.get('http://localhost:9000/carousel/list') // 发送 GET 请求获取轮播图列表
            .then(response => {
                if (response.data.code === 1) { // 如果获取轮播图成功
                    renderCarousel(response.data.list); // 调用渲染轮播图函数
                } else {
                    console.error('获取轮播图失败'); // 打印错误信息
                }
            })
            .catch(error => {
                console.error('报错', error); // 打印请求错误信息
            });
    }

    // 渲染轮播图函数
    function renderCarousel(images) {
        const carouselItem = $('#carousel-item'); // 获取轮播图容器
        images.forEach(image => { // 遍历轮播图列表
            const imgElement = `<div><img src="http://localhost:9000/${image.name}" alt="${image.name}"></div>`; // 创建轮播图元素
            carouselItem.append(imgElement); // 将轮播图元素添加到容器中
        });

        // 初始化轮播图
        layui.use('carousel', function () { // 使用 layui 的 carousel 模块
            var carousel = layui.carousel;
            carousel.render({
                elem: '#carousel', // 轮播图容器
                width: '1200px', // 轮播图宽度
                height: '600px', // 轮播图高度
                arrow: 'hover', // 轮播图箭头显示方式
                anim: 'fade' // 轮播图动画效果
            });
        });
    }

    // 个人中心按钮点击事件
    $('.self').on('click', function () { // 为个人中心按钮添加点击事件监听器
        window.location.href = 'self.html'; // 跳转到个人中心页面
    });
});
